<template>
  <div>
    <el-card class="mb-16">
      <div class="section-title">
        基本信息
        <el-button 
          type="primary" 
          size="small" 
          @click="toggleEditMode"
          style="margin-left: 12px;"
        >
          {{ isEditMode ? '完成编辑' : '编辑信息' }}
        </el-button>
      </div>
      <el-row :gutter="24">
        <el-col :span="6">用户ID：{{ member.id }}</el-col>
        <el-col :span="6">性别：{{ member.gender }}</el-col>
        <el-col :span="6">出生日期：{{ member.birthday }}</el-col>
        <el-col :span="6">
          <div class="editable-field">
            <span>手机号：</span>
            <div v-if="isEditMode" class="edit-input">
              <el-input 
                v-model="editForm.phone" 
                size="small" 
                placeholder="请输入国际手机号"
                @blur="saveField('phone')"
                @keyup.enter="saveField('phone')"
              />
            </div>
            <span v-else class="field-value" @click="startEdit('phone')">
              {{ maskPhone(member.phone) }}
              <el-icon class="edit-icon"><EditPen /></el-icon>
            </span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mt-12">
        <el-col :span="6">
          <div class="editable-field">
            <span>旺旺号：</span>
            <div v-if="isEditMode" class="edit-input">
              <el-input 
                v-model="editForm.wangwang" 
                size="small" 
                placeholder="请输入旺旺号"
                @blur="saveField('wangwang')"
                @keyup.enter="saveField('wangwang')"
              />
            </div>
            <span v-else class="field-value" @click="startEdit('wangwang')">
              {{ member.wangwang || '未设置' }}
              <el-icon class="edit-icon"><EditPen /></el-icon>
            </span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mt-12">
        <el-col :span="24">
          <div class="real-name-section">
            <div class="section-subtitle">实名认证信息</div>
            <div class="real-name-row">
              <span class="real-name-item">真实姓名：{{ member.realName }}</span>
              <span class="real-name-item">身份证号：{{ maskIdCard(member.idCard) }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    
    <!-- 交易账号信息 -->
    <el-card class="mb-16">
      <div class="section-title">
        交易账号信息
        <el-button 
          v-if="memberTradeAccounts.length > 0"
          type="primary" 
          size="small" 
          @click="openSwitchAccountDialog"
          style="margin-left: 12px;"
        >
          <el-icon><Refresh /></el-icon>
          切换交易账号
        </el-button>
      </div>
      <div v-if="memberTradeAccounts.length > 0">
        <div class="trade-accounts-list">
          <div v-for="account in memberTradeAccounts" :key="account.account" class="trade-account-item" :class="getStatusClass(account.status)">
            <div class="account-header">
              <div class="account-info">
                <el-tag :type="getSiteTagType(account.site)" size="small" class="site-tag">
                  {{ getSiteDisplayName(account.site) }}
                </el-tag>
                <span class="account-text">{{ account.account }}</span>
              </div>
              <el-tag :type="getStatusTagType(account.status)" size="small" class="status-tag">
                {{ account.status }}
              </el-tag>
            </div>
            <div class="server-info" v-if="account.bindServer">
              <span class="server-label">所属服务器：</span>
              <span class="server-text">{{ account.bindServer }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="no-data">
        <el-empty description="该会员暂未绑定交易账号" :image-size="80" />
      </div>
    </el-card>

    <!-- 切换交易账号弹窗 -->
    <el-dialog 
      v-model="switchAccountDialog.visible" 
      title="切换交易账号" 
      width="700px" 
      :close-on-click-modal="false"
    >
      <div class="switch-account-content">
        <div class="switch-selection">
          <h4>选择要切换的交易账号：</h4>
          <div class="account-selection-grid">
            <div 
              v-for="account in memberTradeAccounts" 
              :key="account.account" 
              class="account-selection-item"
              :class="{ 'selected': switchAccountDialog.form.sourceAccount === account.id }"
              @click="selectSourceAccount(account.id)"
            >
              <div class="account-selection-header">
                <el-tag :type="getSiteTagType(account.site)" size="small">
                  {{ getSiteDisplayName(account.site) }}
                </el-tag>
                <el-tag :type="getStatusTagType(account.status)" size="small">
                  {{ account.status }}
                </el-tag>
              </div>
              <div class="account-selection-text">{{ account.account }}</div>
              <div class="account-selection-server" v-if="account.bindServer">
                {{ account.bindServer }}
              </div>
            </div>
          </div>
        </div>
        
        <el-divider />
        
        <div class="switch-target" v-if="switchAccountDialog.form.sourceAccount">
          <h4>选择目标交易账号：</h4>
          <el-form :model="switchAccountDialog.form" label-width="120px">
            <el-form-item label="目标交易账号" required>
              <el-select 
                v-model="switchAccountDialog.form.targetAccount" 
                placeholder="请选择目标交易账号" 
                style="width: 100%"
                filterable
              >
                <el-option
                  v-for="account in availableTradeAccounts"
                  :key="account.id"
                  :label="`${getSiteDisplayName(account.site)} - ${account.account} (${account.status})`"
                  :value="account.id"
                  :disabled="account.status === '禁用'"
                >
                  <div style="display: flex; justify-content: space-between; align-items: center;">
                    <span>{{ getSiteDisplayName(account.site) }} - {{ account.account }}</span>
                    <el-tag :type="getStatusTagType(account.status)" size="small">
                      {{ account.status }}
                    </el-tag>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            

          </el-form>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="switchAccountDialog.visible = false">取消</el-button>
          <el-button 
            type="primary" 
            @click="confirmSwitchAccount"
            :loading="switchAccountDialog.loading"
            :disabled="!switchAccountDialog.form.sourceAccount || !switchAccountDialog.form.targetAccount"
          >
            确认切换
          </el-button>
        </div>
      </template>
    </el-dialog>
    
    <el-card class="mb-16">
      <div class="section-title">地址信息</div>
      <div class="address-list">
        <div class="address-item" v-if="member.addressA">
          <div class="address-header">
            <el-tag type="primary" size="small" class="address-tag">默认地址</el-tag>
            <span class="address-type">家</span>
          </div>
          <div class="address-details">
            <div class="address-row">
              <span class="address-label">收件人：</span>
              <span class="address-value">{{ member.receiverA || '未设置' }}</span>
            </div>
            <div class="address-row">
              <span class="address-label">手机号：</span>
              <span class="address-value">{{ maskPhone(member.phoneA) }}</span>
            </div>
            <div class="address-row">
              <span class="address-label">地址：</span>
              <span class="address-value">{{ member.addressA }}</span>
            </div>
          </div>
        </div>
        <div class="address-item" v-if="member.addressB">
          <div class="address-header">
            <el-tag type="success" size="small" class="address-tag">备用地址</el-tag>
            <span class="address-type">家</span>
          </div>
          <div class="address-details">
            <div class="address-row">
              <span class="address-label">收件人：</span>
              <span class="address-value">{{ member.receiverB || '未设置' }}</span>
            </div>
            <div class="address-row">
              <span class="address-label">手机号：</span>
              <span class="address-value">{{ maskPhone(member.phoneB) }}</span>
            </div>
            <div class="address-row">
              <span class="address-label">地址：</span>
              <span class="address-value">{{ member.addressB }}</span>
            </div>
          </div>
        </div>
        <div class="address-item" v-if="member.addressC">
          <div class="address-header">
            <el-tag type="warning" size="small" class="address-tag">工作地址</el-tag>
            <span class="address-type">公司</span>
          </div>
          <div class="address-details">
            <div class="address-row">
              <span class="address-label">收件人：</span>
              <span class="address-value">{{ member.receiverC || '未设置' }}</span>
            </div>
            <div class="address-row">
              <span class="address-label">手机号：</span>
              <span class="address-value">{{ maskPhone(member.phoneC) }}</span>
            </div>
            <div class="address-row">
              <span class="address-label">地址：</span>
              <span class="address-value">{{ member.addressC }}</span>
            </div>
          </div>
        </div>
        <div v-if="!member.addressA && !member.addressB && !member.addressC" class="no-address">
          <el-empty description="暂无地址信息" :image-size="60" />
        </div>
      </div>
    </el-card>
    <el-card>
      <div class="section-title">概况信息</div>
      <div class="overview-content">
        <!-- 用户标签 -->
        <div class="overview-section">
          <div class="overview-label">
            <el-icon><User /></el-icon>
            <span>用户标签</span>
          </div>
          <div class="overview-value tags-container">
            <div class="tags-row">
              <!-- 自动标签 -->
              <div class="tag-category" v-if="getAutoTags(member.tags).length > 0">
                <div class="category-header">
                  <el-icon><Monitor /></el-icon>
                  <span>自动标签</span>
                </div>
                <div class="tags-wrapper">
                  <el-tag 
                    v-for="tag in getAutoTags(member.tags)" 
                    :key="tag" 
                    :type="getTagType(tag)"
                    size="small"
                    class="tag-item"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
              
              <!-- 手动标签 -->
              <div class="tag-category" v-if="getManualTags(member.tags).length > 0">
                <div class="category-header">
                  <el-icon><EditPen /></el-icon>
                  <span>手动标签</span>
                </div>
                <div class="tags-wrapper">
                  <el-tag 
                    v-for="tag in getManualTags(member.tags)" 
                    :key="tag" 
                    :type="getTagType(tag)"
                    size="small"
                    class="tag-item"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
            </div>
            
            <span v-if="!member.tags || member.tags.length === 0" class="no-tags">暂无标签</span>
          </div>
        </div>
        
        <!-- 时间信息 -->
        <div class="overview-section">
          <div class="overview-label">
            <el-icon><Clock /></el-icon>
            <span>时间信息</span>
          </div>
          <div class="overview-value time-info">
            <div class="time-item">
              <span class="time-label">注册时间：</span>
              <span class="time-value">{{ member.registerTime || '未知' }}</span>
            </div>
            <div class="time-item">
              <span class="time-label">最近登录：</span>
              <span class="time-value">{{ member.lastLogin || '未知' }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, computed, ref, nextTick } from 'vue';
import { User, Clock, Monitor, EditPen, Refresh } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { tradeAccounts } from '@/mock/tradeAccounts';
import { switchTradeAccount, checkTradeAccountAvailability } from '@/services/tradeAccountService';

const props = defineProps<{ member: any }>();

// 获取当前会员绑定的交易账号
const memberTradeAccounts = computed(() => {
  return tradeAccounts.value.filter(account => 
    account.bindUsers && account.bindUsers.some((user: any) => user.id === props.member.id)
  );
});

// 获取所有可用的交易账号（排除当前会员已绑定的账号）
const availableTradeAccounts = computed(() => {
  return tradeAccounts.value.filter(account => 
    account.status === '启用' && 
    !account.bindUsers?.some((user: any) => user.id === props.member.id)
  );
});

// 站点显示名称映射
const siteDisplayNames: Record<string, string> = {
  'mercari': '煤炉',
  'yahoo_auction': '雅虎日拍',
  'yahoo_flea': '雅虎闲置',
  'mercari_flea': '煤炉闲置',
  'rakuten': '乐天市场',
  'amazon': '亚马逊',
  'amazon_jp': '亚马逊日本',
  'sofmap': 'Sofmap',
  'skit': 'SKiT',
  'skitdolce': 'Skitdolce',
  'tohoanima': 'Tohoanima',
  'kotobukiya': 'Kotobukiya',
  'jumpsho': 'JUMP SHO！',
  'cco': 'CCO',
  'store': 'Store',
  'aniplexplus': 'ANIPLEX+',
  'm78': 'm78',
  'eeo': 'Eeo',
  'aniplexplus2': 'Aniplexplus',
  'jumpcs': 'Jumpcs',
  'anime': 'ANIME',
  'amnibus': 'AMNIBUS',
  'kyoanishop': 'Kjoanishop！',
  'movic': 'mOvIC',
  'animecollection': 'AnimeCollection',
  'chara_ani': 'Chara-Ani',
  'amnibus2': 'Amnibus',
  'kyoanishop2': 'Kyoanishop',
  'movic2': 'Movic'
};

// 获取站点显示名称
function getSiteDisplayName(site: string): string {
  return siteDisplayNames[site] || site;
}

// 获取站点标签类型
function getSiteTagType(site: string): string {
  const primarySites = ['mercari', 'yahoo_auction', 'yahoo_flea', 'rakuten', 'amazon'];
  return primarySites.includes(site) ? 'primary' : 'info';
}

// 获取状态标签类型
function getStatusTagType(status: string): string {
  return status === '启用' ? 'success' : 'danger';
}

// 获取状态CSS类
function getStatusClass(status: string): string {
  return status === '启用' ? 'status-enabled' : 'status-disabled';
}

// 获取标签类型
function getTagType(tag: string): string {
  const tagTypes: Record<string, string> = {
    '新用户': 'info',
    '高价值': 'success',
    '活跃': 'primary',
    '老客户': 'warning'
  };
  return tagTypes[tag] || 'info';
}

// 获取自动标签
function getAutoTags(tags: string[]): string[] {
  if (!tags) return [];
  const autoTags = ['新用户', '活跃', '高价值', '老客户'];
  return tags.filter(tag => autoTags.includes(tag));
}

// 获取手动标签
function getManualTags(tags: string[]): string[] {
  if (!tags) return [];
  const autoTags = ['新用户', '活跃', '高价值', '老客户'];
  return tags.filter(tag => !autoTags.includes(tag));
}

function maskPhone(phone: string) {
  if (!phone) return '';
  
  // 处理国际号码（+开头）
  if (phone.startsWith('+')) {
    return phone.replace(/(\+\d{0,3})?(\d{3})(\d{4})(\d{0,})/g, (m, p1, p2, p3, p4) => {
      return `${p1 || ''}${p2}****${p4}`;
    });
  }
  
  // 处理国内11位手机号
  if (phone.length === 11) {
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
  }
  
  // 处理其他格式
  if (phone.length >= 7) {
    return phone.replace(/(\d{3})\d{4}(.*)/, '$1****$2');
  }
  
  // 如果长度不够，只显示前3位
  return phone.substring(0, 3) + '****';
}
function maskIdCard(id: string) {
  if (!id) return '';
  return id.replace(/(\d{4})\d{10}(\w{4})/, '$1**********$2');
}
function maskAnyPhone(str: string) {
  if (!str) return '';
  // 匹配+开头或纯数字，7位及以上，保留前3后4
  return str.replace(/(\+?\d{0,3})?(\d{3})(\d{4})(\d{0,})/g, (m, p1, p2, p3, p4) => {
    return `${p1 || ''}${p2}****${p4}`;
  });
}
function maskPhoneInAddress(addr: string) {
  if (!addr) return '';
  return maskAnyPhone(addr);
}

// 编辑相关变量
const isEditMode = ref(false)
const editForm = ref({
  phone: '',
  wangwang: ''
})

// 切换交易账号相关变量
const switchAccountDialog = ref({
  visible: false,
  loading: false,
  form: {
    sourceAccount: '',
    targetAccount: ''
  }
});

// 编辑相关函数
function toggleEditMode() {
  isEditMode.value = !isEditMode.value
  if (isEditMode.value) {
    // 进入编辑模式时，初始化表单数据
    editForm.value.phone = props.member.phone || ''
    editForm.value.wangwang = props.member.wangwang || ''
  }
}

function startEdit(field: string) {
  if (!isEditMode.value) {
    toggleEditMode()
  }
  // 聚焦到对应的输入框
  nextTick(() => {
    const input = document.querySelector(`input[placeholder*="${field === 'phone' ? '手机号' : '旺旺号'}"]`) as HTMLInputElement
    if (input) {
      input.focus()
      input.select()
    }
  })
}

function saveField(field: string) {
  const value = editForm.value[field as keyof typeof editForm.value]
  
  // 验证手机号格式
  if (field === 'phone' && value) {
    const phoneRegex = /^\+33\d{9}$/
    if (!phoneRegex.test(value)) {
      ElMessage.error('请输入正确的国际手机号格式（+33开头）')
      return
    }
  }
  
  // 更新会员数据
  if (field === 'phone') {
    props.member.phone = value
  } else if (field === 'wangwang') {
    props.member.wangwang = value
  }
  
  // 这里可以调用API保存到后端
  console.log(`保存${field}:`, value)
  
  ElMessage.success(`${field === 'phone' ? '手机号' : '旺旺号'}保存成功`)
}

// 切换交易账号相关函数
function openSwitchAccountDialog() {
  switchAccountDialog.value.visible = true;
  switchAccountDialog.value.form.sourceAccount = ''; // 清空默认值
  switchAccountDialog.value.form.targetAccount = ''; // 清空默认值
}

function selectSourceAccount(accountId: string) {
  switchAccountDialog.value.form.sourceAccount = accountId;
  // 清空目标账号选择，因为源账号改变了
  switchAccountDialog.value.form.targetAccount = '';
}

async function confirmSwitchAccount() {
  // 获取源交易账号和目标交易账号
  const sourceAccount = tradeAccounts.value.find(acc => acc.id === switchAccountDialog.value.form.sourceAccount);
  const targetAccount = tradeAccounts.value.find(acc => acc.id === switchAccountDialog.value.form.targetAccount);
  
  if (!sourceAccount) {
    ElMessage.error('未找到源交易账号');
    return;
  }
  
  if (!targetAccount) {
    ElMessage.error('未找到目标交易账号');
    return;
  }

  // 检查目标账号状态
  if (targetAccount.status === '禁用') {
    ElMessage.error('目标交易账号已被禁用，无法使用');
    return;
  }

  // 检查目标账号是否已绑定当前用户（避免重复绑定）
  const isAlreadyBoundToCurrentUser = targetAccount.bindUsers && 
    targetAccount.bindUsers.some((user: any) => user.id === props.member.id);
  if (isAlreadyBoundToCurrentUser) {
    ElMessage.error('该交易账号已绑定当前用户，无需重复绑定');
    return;
  }

  // 显示确认对话框
  const confirmMessage = `确定要将${props.member.nickname}会员的交易账号从【${getSiteDisplayName(sourceAccount.site)} - ${sourceAccount.account}】更换为【${getSiteDisplayName(targetAccount.site)} - ${targetAccount.account}】`;
  
  try {
    await ElMessageBox.confirm(confirmMessage, '确认切换交易账号', {
      confirmButtonText: '确认切换',
      cancelButtonText: '取消',
      type: 'warning',
      dangerouslyUseHTMLString: true
    });
  } catch {
    return; // 用户取消
  }

  switchAccountDialog.value.loading = true;
  try {
    // 检查交易账号可用性
    const isAvailable = await checkTradeAccountAvailability(targetAccount.id);
    if (!isAvailable) {
      ElMessage.error('目标交易账号当前不可用，请选择其他账号');
      return;
    }

    // 调用API切换交易账号
    const success = await switchTradeAccount({
      memberId: props.member.id,
      sourceAccountId: sourceAccount.id,
      targetAccountId: targetAccount.id
    });

    if (success) {
      // 执行本地数据更新
      // 1. 从源交易账号中移除当前会员
      const sourceAccountIndex = tradeAccounts.value.findIndex(acc => acc.id === sourceAccount.id);
      if (sourceAccountIndex !== -1) {
        tradeAccounts.value[sourceAccountIndex].bindUsers = tradeAccounts.value[sourceAccountIndex].bindUsers.filter(
          (user: any) => user.id !== props.member.id
        );
      }

      // 2. 将目标交易账号绑定给当前会员（支持多用户绑定）
      if (!targetAccount.bindUsers) {
        targetAccount.bindUsers = [];
      }
      // 检查是否已经绑定当前用户，如果没有则添加
      const isAlreadyBound = targetAccount.bindUsers.some((user: any) => user.id === props.member.id);
      if (!isAlreadyBound) {
        targetAccount.bindUsers.push({
          id: props.member.id,
          nickname: props.member.nickname
        });
      }

      // 切换成功
      ElMessage.success('交易账号切换成功！');
      switchAccountDialog.value.visible = false;
      
      console.log('切换交易账号成功，会员ID:', props.member.id, '源账号ID:', sourceAccount.id, '目标账号ID:', targetAccount.id);
    } else {
      ElMessage.error('切换交易账号失败，请稍后再试');
    }
  } catch (error) {
    console.error('切换交易账号失败:', error);
    ElMessage.error('切换交易账号失败，请稍后再试');
  } finally {
    switchAccountDialog.value.loading = false;
  }
}
</script>

<style scoped>
.section-title {
  font-weight: bold;
  margin-bottom: 12px;
}
.mb-16 {
  margin-bottom: 16px;
}
.mt-12 {
  margin-top: 12px;
}
.mr-8 {
  margin-right: 8px;
}
.no-data {
  text-align: center;
  padding: 20px 0;
}

.trade-accounts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.trade-account-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  min-width: 200px;
  transition: all 0.3s ease;
}

.trade-account-item.status-enabled {
  border-color: #67c23a;
  background-color: #f0f9ff;
}

.trade-account-item.status-disabled {
  border-color: #f56c6c;
  background-color: #fef0f0;
  opacity: 0.7;
}

.account-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.account-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.site-tag {
  flex-shrink: 0;
}

.account-text {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.server-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #606266;
}

.server-label {
  color: #909399;
}

.server-text {
  color: #606266;
  font-weight: 500;
}

.status-tag {
  flex-shrink: 0;
  font-size: 11px;
}

.real-name-section {
  border-left: 3px solid #409eff;
  padding-left: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  padding: 8px 12px;
}

.section-subtitle {
  font-size: 12px;
  color: #409eff;
  font-weight: 600;
  margin-bottom: 4px;
}

.real-name-row {
  display: flex;
  gap: 24px;
  align-items: center;
}

.real-name-item {
  font-size: 13px;
  color: #606266;
  line-height: 1.4;
}

.address-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.address-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 12px;
  background-color: #fafafa;
  transition: all 0.3s ease;
}

.address-item:hover {
  border-color: #409eff;
  background-color: #f0f9ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.address-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.address-tag {
  flex-shrink: 0;
}

.address-type {
  font-size: 12px;
  color: #909399;
  background-color: #f4f4f5;
  padding: 2px 6px;
  border-radius: 4px;
}

.address-content {
  font-size: 14px;
  color: #303133;
  line-height: 1.5;
  word-break: break-all;
}

.address-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.address-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.address-label {
  font-size: 12px;
  color: #909399;
  min-width: 60px;
  flex-shrink: 0;
}

.address-value {
  font-size: 13px;
  color: #303133;
  flex: 1;
}

.no-address {
  text-align: center;
  padding: 20px 0;
}

.overview-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.overview-section {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.overview-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  min-width: 80px;
  flex-shrink: 0;
}

.overview-label .el-icon {
  color: #409eff;
}

.overview-value {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.no-tags {
  color: #909399;
  font-size: 13px;
  font-style: italic;
}

.time-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.time-item:last-child {
  margin-bottom: 0;
}

.time-label {
  font-size: 13px;
  color: #606266;
  min-width: 70px;
}

.time-value {
  font-size: 13px;
  color: #303133;
  font-weight: 500;
}

.mb-4 {
  margin-bottom: 4px;
}

.tags-container {
  flex-direction: column;
  align-items: flex-start;
}

.tags-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.tag-category {
  flex: 1;
  min-width: 0;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
  font-weight: 500;
}

.category-header .el-icon {
  font-size: 12px;
}

.tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-item {
  margin: 0;
}

.time-info {
  flex-direction: column;
  align-items: flex-start;
}

/* 可编辑字段样式 */
.editable-field {
  display: flex;
  align-items: center;
  gap: 4px;
}

.field-value {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.field-value:hover {
  background-color: #f5f7fa;
}

.edit-icon {
  font-size: 12px;
  color: #909399;
  opacity: 0;
  transition: opacity 0.2s;
}

.field-value:hover .edit-icon {
  opacity: 1;
}

.edit-input {
  flex: 1;
  max-width: 200px;
}

.edit-input .el-input {
  width: 100%;
}

/* 切换交易账号弹窗样式 */
.switch-account-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.switch-selection h4,
.switch-target h4 {
  font-size: 15px;
  color: #303133;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.switch-selection h4::before,
.switch-target h4::before {
  content: '';
  width: 4px;
  height: 16px;
  background: linear-gradient(135deg, #409eff, #67c23a);
  border-radius: 2px;
}

.account-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.account-selection-item {
  padding: 12px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  background-color: #fafafa;
  cursor: pointer;
  transition: all 0.3s ease;
}

.account-selection-item:hover {
  border-color: #409eff;
  background-color: #f0f9ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.account-selection-item.selected {
  border-color: #409eff;
  background: linear-gradient(135deg, #f0f9ff, #e6f7ff);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.account-selection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.account-selection-text {
  font-weight: 500;
  color: #303133;
  font-size: 14px;
  margin-bottom: 4px;
}

.account-selection-server {
  font-size: 12px;
  color: #909399;
}

.switch-target .el-form-item {
  margin-bottom: 16px;
}

.switch-target .el-form-item__label {
  font-weight: 500;
  color: #606266;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

/* 交易账号信息卡片样式优化 */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-title .el-button {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 4px;
}
</style> 